import React, { useEffect,useState } from 'react'
import './Coupon.less'
import Header from '../../components/Header/Header'
import { reqgetcoupon } from '../../http/api'
import { Tabs, Toast } from 'antd-mobile'
import time from 'time-formater'

export default function Coupon(props) {
  let [list,setList] = useState([]);
  let cateArr = ['可使用', '已使用', '已过期'];
  let getList = async ()=>{
    let {data:res} = await reqgetcoupon();
    if(res.code === 200){
      let arr0 = res.list[0].content ? res.list[0].content : [];
      let arr1 = res.list[1].content ? res.list[1].content : [];
      let arr2 = res.list[2].content ? res.list[2].content : [];
      setList([arr0,arr1,arr2])
    }
  }
  useEffect(()=>{
    getList();
  },[])
  return (
    <div className='coupon'>
      <Header back title="优惠券"></Header>
      <Tabs>
        {cateArr.map((item, index) => {
          return (<Tabs.Tab title={item} key={index}>
            {/* {JSON.stringify(list[index])} */}
            {list.length > 0 ? list[index].map(i => (<div className={index === 0 ? 'item' : 'item overdue'} key={i.id} onClick={() => {
              if (index !== 0) {
                Toast.show({ content: '该优惠券已使用或已过期' });
                return;
              }
              props.history.push({ pathname: '/index/shop', state: { couponInfo: i } })
            }}>
              <div className="title">{i.title}</div>
              <div className="limit">满{i.limit_money}减{i.money}</div>
              <div className='desc'>{i.description}</div>
              <div className='time'>有效期：{time(new Date(i.begintime - 0)).format('YYYY-MM-DD HH:mm:ss')}-{time(new Date(i.endtime - 0)).format('YYYY-MM-DD HH:mm:ss')}</div>
            </div>)) : (<div>暂无数据</div>)}
          </Tabs.Tab>)
        })}
      </Tabs>
    </div>
  )
}

